<template>
  <div class="Box3  fx-flex fx-flex-direction" @mouseover="stopScroll()" @mouseout="cycleScroll()">
    <div class="fx_title">告警中心</div>
    <div ref="warnList" class="warnList fx__scroll_box fx-flex-1">
      <div class="warnBox" v-for="item in 10" :key="item">
        <div class="warnDesc"></div>
        <div class="warnImg"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Box3",
  components: {},
  data() {
    return {
      scrollDirection: 0, //0正序，1倒序
      timer: null,
    };
  },
  mounted() {
    this.cycleScroll();
  },
  beforeDestroy() {
    this.stopScroll();
  },
  methods: {
    cycleScroll() {
      let list = this.$refs.warnList;
      let maxHeight = list.scrollHeight - list.clientHeight;
      this.timer = setInterval(() => {
        if (this.scrollDirection == 0) list.scrollTop++;
        else if (this.scrollDirection == 1) list.scrollTop--;
        if (list.scrollTop >= maxHeight) {
          this.scrollDirection = 1;
        } else if (list.scrollTop <= 10) {
          this.scrollDirection = 0;
        }
      }, 100);
    },
    stopScroll() {
      if (this.timer) clearInterval(this.timer);
    },
  },
};
</script>
<style lang="scss" scoped>
.Box3 {
  height: 100%;
  position: relative;
  overflow: hidden;
  .warnList {
    position: relative;
    padding-right: 10px;
    .warnBox {
      background-image: linear-gradient(rgb(81, 46, 58), rgb(51, 57, 65));
      padding: 15px;
      margin-bottom: 10px;
      height: 100px;
      position: relative;
      .warnImg {
        position: absolute;
        right: 8px;
        top: 8px;
        background: url("~@/assets/img/warn.png") no-repeat;
        background-size: 100%;
        width: 45px;
        height: 45px;
        opacity: 0.6;
      }
    }
  }
}
</style>